<template>
  <div class="FollowMe">
    <div class="FollowMe-title">
      <span>已关注我</span>
    </div>
    <div class="mt-10 card-box">
      <a-form layout="inline" class="clearfix">
        <a-form-item label="关键字：">
          <a-input placeholder="请输入企业名称" />
        </a-form-item>
        <a-form-item label="关注状态：">
          <a-select default-value="全部" style="width: 120px">
            <a-select-option
              v-for="item in reFollow"
              :value="item.label"
              :key="item.key"
            >{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="行业分类：">
          <a-select
            value="全部"
            style="width: 150px;margin-right:20px"
            @change="handleProvinceChange"
          >
            <a-select-option v-for="province in provinceData" :key="province">{{ province }}</a-select-option>
          </a-select>
          <a-select value="全部" v-model="secondCity" style="width: 150px">
            <a-select-option v-for="city in cities" :key="city">{{ city }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-button class="f-right mt-5" type="primary">搜索</a-button>
        <a-button class="f-right mr-10 mt-5" style="color:#909399;">清空</a-button>
      </a-form>
    </div>

    <div class="action">
      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="ipagination"
        :rowKey="record=>record.idNum"
      >
        <template slot="handle" slot-scope="text,recode">
          <a @click="showInformation(recode)">详情</a>
          <a-divider type="vertical" />
          <a @click="operation(recode)">编辑</a>
        </template>
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="action" slot-scope="text,record">
          <a @click="seeEdit(record)" style="margin-right:32px">查看详情</a>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: "序号",
    dataIndex: "idNum",
    width: 80
  },
  {
    title: "企业名称",
    dataIndex: "enterpriseName"
  },
  {
    title: "企业地址",
    dataIndex: "enterpriseAddress"
  },
  {
    title: "企业标签",
    dataIndex: "enterpriseLabel"
  },
  {
    title: "企业需求数",
    dataIndex: "EnterpriseDemand"
  },
  {
    title: "企业产品数",
    dataIndex: "EnterpriseNum"
  },
  {
    title: "关注状态",
    dataIndex: "state",
    customRender: function(text) {
      if (text == 1) {
        return "互相关注";
      } else if (text == 2) {
        return "单方关注";
      }
    }
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" }
  }
];

const data = [];
for (let i = 1; i < 26; i++) {
  data.push({
    idNum: i,
    enterpriseName: "深圳市联创三金电器有限公司",
    enterpriseAddress:
      "深圳市龙华区龙华街道清华社区和平路23号联创厂1栋101（1-3栋）",
    enterpriseLabel: "先进制造与自动化;高新认定",
    EnterpriseDemand: "20",
    EnterpriseNum: "100",
    state: "1"
  });
}
const provinceData = ["制造业", "建筑业"];
const cityData = {
  制造业: ["制造业1", "制造业2", "制造业3"],
  建筑业: ["建筑业1", "建筑业2", "建筑业3"]
};
export default {
  data() {
    return {
      data,
      columns,
      ipagination: {
        total: 0,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: total => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true
      },
      reFollow: [
        {
          label: "互相关注",
          key: "1"
        },
        {
          label: "单方关注",
          key: "2"
        }
      ],
      provinceData,
      cityData,
      cities: cityData[provinceData[0]],
      secondCity: cityData[provinceData[0]][0]
    };
  },
  methods: {
    handleProvinceChange(value) {
      this.cities = cityData[value];
      this.secondCity = cityData[value][0];
    }
  }
};
</script>

<style lang="less" scoped>
.FollowMe {
  padding: 17px 24px;
  background: #fff;
  .FollowMe-title {
    &:nth-child(1) {
      font-size: 22px;
      color: #303133;
    }
  }

  .card-box {
    padding: 16px 19px;
    background-color: #f5f7fa;
    border-radius: 4px;
    margin-bottom: 24px;
  }

  .action {
    span {
      a {
        font-size: 14px;
        color: #188af1;
      }
    }
  }
}
</style>